<template>
  <!-- 废弃 -->
  <div name="签名box" class="bold color-0 sign-html">
    {{ title }}
    <div class="line_box hw200 pointer relative" @click="BeginSign()">
      <img :src="base64Img" class="sign-img" />
    </div>

    <div v-if="type == 2" class="inline-block">
      与患者关系
      <div class="line_box  relative" style="width:180px">
        <el-select v-model="relation" placeholder="" @change="changeRelation">
          <el-option
            v-for="item in options"
            :key="item.DM"
            :label="item.MC"
            :value="item.DM"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="inline-block">
      签名日期
      <div class="line_box hw200">
        {{ signDate }}
      </div>
    </div>
   
  </div>
</template>

<script>
import { timeFormatter } from "UTILS/format";

export default {
  name: "Sign",
  props: {
    title: {
      required: true,
      type: String,
    },
    type: {
      default: "1", //1 表示本人签名 2表示亲属签名
      type: String,
    },
    info:{

    }
  },
  data() {
    return {
      WebSign: null,
      connState: "",
      model: "",
      sn: "",
      base64Img: "",
      signDate: "",
      relation: "",
      options: [
        {
          DM: "1",
          MC: "家人",
        },
        {
          DM: "2",
          MC: "朋友",
        },
        {
          DM: "3",
          MC: "亲人",
        },
      ],
    };
  },
  created() {
    console.log("connState", this.connState);
    this.base64Img = this.info.sign_img;
    this.signDate = this.info.sign_time;
    this.relation = this.info.sign_relation;
  },
  destroyed() {},
  methods: {
    ConnSign(callback) {
      let _this = this;

      _this.WebSign.Init(function(status) {
        if (status) {
          _this.WebSign.Status(function(status, data) {
            _this.model = data.model;
            _this.sn = data.sn;
          });

          //设置事件回调
          _this.WebSign.onSignConfirm = function(e) {
            let base64 = "data:image/png;base64," + e.img;
            _this.base64Img = base64;
            _this.signDate = timeFormatter(new Date());
            _this.DisconnSign();
            _this.$emit("signBack", {
              signImg: _this.base64Img,
              signDate: _this.signDate,
              relation: _this.relation,
            });
          };
          _this.connState = 1;
        } else {
          _this.connState = 0;
          if (_this.connState == "0") {
            _this.$alert("连接签字版失败，请刷新页面重试", {
              confirmButtonText: "确定",
              callback: (action) => {},
            });
          }
        }
        callback(status);
      });
    },
    changeRelation(){
      let _this = this;
      _this.$emit("signBack", {
        signImg: _this.base64Img,
        signDate: _this.signDate,
        relation: _this.relation,
      });
    },
    DisconnSign() {
      let _this = this;
      _this.WebSign.Destroy(() => {
        _this.connState = "";
        _this.model = "";
        _this.sn = "";
      });
    },
    BeginSign() {
      // let _this = this;
      // /* eslint-disable */
      // this.WebSign = new jSign();
      // this.ConnSign((status) => {
      //   console.log("status", status);
      //   if (status) {
      //     _this.WebSign.BeginSign(function (ztbz) {});
      //   }
      // });
    },
    destroyed() {
      this.DisconnSign();
    },
  },
};
</script>

<style  lang="less">
.sign-html {
  .line_box {
    display: inline-block;
    height: 22px;
  }
  .sign-img {
    position: absolute;
    left: 20px;
    width: 100px;
    bottom: -10px;
    z-index: 1;
  }

  .el-select {
    position: absolute;
    left: 10px;
    bottom: 0px;
    .el-input__inner {
      border: none !important;
      font-size: 14px;
      background: none;
    }
    .el-input__suffix {
      display: none;
    }
  }
}
</style>

